<template>
  <div class="group-detail">
    <div class="group-detail-top d-jcs-aic">
      <div class="groupManagement-card-detail detail-left">
        <div style="display: flex;"><span><img
                                      src="../../../assets/group.png"
                                      class="imgGroup"></span>
          <span class="chatName-group-all"><div class="chatName-group">群名称：{{ groupDetail.name }}</div> <div
            class="chatName-detail"><span
            class="ownerNameAndCount">群主：{{ groupDetail.groupLeader }}</span><span
            class="ownerNameAndCountTotal">共 {{ groupDetail.total }} 位群成员</span></div></span></div>
        <div class="groupManagementDetail-count d-jcs-aic">
          <b-card-data v-for="(item,index) in numList" :key="index" v-bind="item"/>
        </div>
      </div>
      <div class="groupManagement-card-detail detail-right">
        <div class="GroupAnnouncement">群公告</div>
        <a-empty v-if="!groupDetail.notice"/>
        <div>{{ groupDetail.notice }}</div>
      </div>
    </div>
    <div class="group-detail-user">
      <a-table
        rowKey="id"
        :pagination="paginationDetail"
        :columns="columnsDetail"
        :data-source="dataListDetail"
        @change="handleTableChange">
          <span slot="nickname" slot-scope="text, record"><span style="margin-right: 5px">{{ record.nickname }}</span><span v-if="record.type===2" style="color:#fbbf48">@企业微信</span><span style="color:#25b864;" v-else>@微信</span></span>
        <span slot="joinTime" slot-scope="text, record">{{ getTime(record.joinTime * 1000) }}</span>
        <span slot="joinScene" slot-scope="text, record">{{ record.joinScene ===3?'扫描群二维码入群':'成员邀请入群' }}</span>
        <!--        <span slot="id" slot-scope="text, record">-->
        <!--          <a-button v-if="record.type!==1" type="link" @click="gotoDetail(record.userId)">客户详情</a-button>-->
        <!--          <span v-else>内部成员</span>-->
        <!--        </span>-->
      </a-table>
    </div>
  </div>
</template>

<script>
    import storage from 'store'
    import { ACCESS_TOKEN } from '@/store/mutation-types'
    import API from '../../../../api/group'
    import BCardData from '../../../components/b-card-data'

    export default {
        name: 'GroupDetail',
        components: { BCardData },
        props: {
            groupId: {
                type: [Number, String],
                default: null
            }
        },
        data () {
            return {
                numList: [
                    {
                        title: '总人数',
                        todayTitle: '',
                        tips: '群聊总人数',
                        dataNum: '',
                        todayDataNum: 0,
                        todayHr: false
                    },
                 {
                        title: '今日新增',
                        todayTitle: '',
                        tips: '今日进群人次',
                        dataNum: '',
                        todayDataNum: 0,
                     todayHr: false
                    }, {
                        title: '今日退群',
                        todayTitle: '',
                        tips: '今日退群人次',
                        dataNum: '',
                        todayDataNum: 0,
                        todayHr: false
                    }],
                paginationDetail: {
                    current: 1,
                    total: 0,
                    pageSize: 10 // 每页中显示10条数据
                },
                loadingDetail: false,
                // 表头
                columnsDetail: [
                    {
                        title: '群成员',
                        scopedSlots: { customRender: 'nickname' }
                    },
                    {
                        title: '入群时间',
                        width: '200px',
                        scopedSlots: { customRender: 'joinTime' }
                    },
                    {
                        title: '入群方式',
                        width: '200px',
                        scopedSlots: { customRender: 'joinScene' }
                    },
                    {
                        title: '操作',
                        scopedSlots: { customRender: 'id' }
                    }
                ],
                dataListDetail: [],
                groupDetail: {}
            }
        },
        computed: {
            qwUserId () {
                return this.$store.state.user.info.qwUserId
            }
        },
        mounted () {
            this.getGroupData()
            this.getData()
        },
        methods: {
            getGroupData () {
                API.getGroupInfo({
                    qwUserId: this.qwUserId,
                    groupChatId: this.groupId
                }).then(res => {
                    this.groupDetail = Object.assign({}, res)
                    this.numList[0].dataNum = res.total
                    this.numList[1].dataNum = res.add
                    this.numList[2].dataNum = res.leave
                })
            },
            getData () {
                API.pageGroupCustomer({
                    current: this.paginationDetail.current,
                    size: this.paginationDetail.pageSize,
                    qwUserId: this.qwUserId,
                    groupChatId: this.groupId
                }).then(res => {
                    this.dataListDetail = res.records
                    this.paginationDetail.current = res.current
                    this.paginationDetail.total = res.total
                    this.loadingDetail = true
                })
            },
            handleTableChange (paginationDetail) {
                this.paginationDetail.current = paginationDetail.current
                this.paginationDetail.pageSize = paginationDetail.pageSize
                this.getData()
            },
            getTime (time) {
                return time ? this.$Utils.getTimeFormat(time).substring(0, 16) : ''
            },
            getUrl () {
                const token = storage.get(ACCESS_TOKEN)
                this.url = 'qw/group/importGroupCustomer?qwUserId=' + this.qwUserId + '&groupId=' + this.groupId + '&access_token=' + token
            },
            gotoDetail (id) {
                this.$router.push({
                    path: '/qywx/khgl/page?type=detail&fromGroupUserId=' + id + '&fromGroupId=' + this.groupId
                })
            }

        }
    }
</script>

<style scoped lang="less">
    .group-detail {
        .group-detail-user {
            margin-top: 12px;
            position: relative;
            width: 100%;
            background: #fff;
            padding: 24px 32px;
            box-sizing: border-box;
        }
        .groupManagement-card-detail {
            position: relative;
            width: 100%;
            height: 250px;
            max-height: 250px;
            overflow-x: hidden;
            overflow-y: auto;
            background: #fff;
            padding: 24px 32px;
            box-sizing: border-box;
        }

        .GroupAnnouncement {
            font-size: 16px;
            font-weight: 600;
            color: #494949;
            margin-bottom: 16px;
        }

        .group-detail-top {
            position: relative;
            height: auto;
            margin-right: 0;
            margin-left: 0;
            zoom: 1;
            display: flex;
            box-sizing: border-box;
        }

        .groupManagement-card-detail {
            position: relative;
            width: 100%;
            height: 250px;
            max-height: 250px;
            overflow-x: hidden;
            overflow-y: auto;
            background: #fff;
            padding: 24px 32px;
            box-sizing: border-box;
        }
        .detail-left{
            width: 70%;
        }
        .detail-right{
            width: 28%;
        }
        .groupManagementDetail-count {
            width: 100%;
            margin-top: 24px;
        }

        .imgGroup {
            display: inline-block;
            width: 50px;
            height: 50px;
        }

        .chatName-group-all {
            display: inline-block;
            margin-left: 10px;
        }

        .chatName-group {
            width: auto;
            font-size: 18px;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .chatName-detail {
            color: #494949;
        }
    }

</style>
